<template>
  <a class="del-btn" @click="$emit('click')" @mousedown="$emit('mousedown', $event)" :style="{left:btnX+'px'}"><DelIco class="del-ico"/></a>
</template>

<script>
import DelIco from '@/view/ico/close'
export default {
  components: {
    DelIco
  },
  props: {
    d: Object
  },
  data () {
    return {
      btnX: -22
    }
  },
  mounted () {
    this.setBtnX(this.d.x)
  },
  methods: {
    onMoveChange () {
      this.setBtnX(this.d.x)
    },
    // 防止按钮隐藏
    // setBtnY (y) {
    //   this.btnY = -24
    //   if (y < 24) this.btnY = -y
    // },
    setBtnX (x) {
      this.btnX = -22
      if (x < 22) this.btnX = -x
    }
  }
}
</script>

<style scoped>
.del-btn {
  position: absolute;
  /* right: 4px;
  top: -24px; */
  left: -22px;
  top: 27px;
  width: 20px;
  height: 20px;
  background-color: #e60000;
  padding: 1px;

  /* background-size: 71%; */
  cursor: pointer;
}
.del-ico {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  color: #fff;
  position: absolute;

}
</style>
